<template>
  <div class="income">
    <newHeader/>
    <div class="w">
      <div class="top clearfix">
        <div class="num-box fl">
          <p class="num"><spinner class="n1" v-if="loading.allStatistics"/><cu v-else :val="allStatisticsData.send_moeny | num" :decimals="0" class="n1"></cu><span class="n2">/</span><spinner class="n3" v-if="loading.allStatistics"/><cu v-else :val="allStatisticsData.all_moeny | num" :decimals="0" class="n3"></cu></p>
          <p class="name">{{$t('hrt.t2')}}</p>
        </div>
        <div class="fr date-box clearfix">
          <div class="type-box fr">
            <button class="btn" :disabled="loading.listDoubleStats" :class="{active:type === 2}" @click="type = 2;">{{$t('unit.month')}}</button>
            <button class="btn" :disabled="loading.listDoubleStats" :class="{active:type === 1}" @click="type = 1">{{$t('unit.daily')}}</button>
          </div>
          <div>
            <el-date-picker
              :disabled="loading.listDoubleStats"
              v-model="time"
              :clearable="false"
              type="daterange"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              :range-separator="$t('wallet.bill.to')"
              :start-placeholder="$t('wallet.bill.start_date')"
              :end-placeholder="$t('wallet.bill.end_date')"
              @change="changeTime"
              >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="table-box">
        <table class="table" v-loading="loading.listDoubleStats">
          <thead>
            <tr>
              <th>{{$t('dashboard.time')}}</th>
              <th>{{$t('subaccount.currency')}}</th>
              <th><span class="th-span">{{type === 1 ? $t('incomeDetail.t5') : $t('incomeDetail.t6')}} <router-link to="/hrt/miningdetail"><span class="i">?</span></router-link></span></th>
              <th>{{$t('incomeDetail.t3')}}</th>
            </tr>
          </thead>
          <tbody>
            <template v-if="list.length">
              <tr v-for="(v,k) in list" :key="k">
                <td>{{v.format_day}}</td>
                <td>{{(v.coin_type).toUpperCase()}}</td>
                <td>{{v.money}}</td>
                <td>{{v.all_net_income}}</td>
              </tr>
            </template>
            <template v-else>
              <tr>
                <td colspan="4">{{$t('unit.no_data')}}</td>
              </tr>
            </template>
          </tbody>
        </table>
        <Pagination :page="page | num" :pageSize="limit | num" :totalCount="count | num" :disabled="loading.listDoubleStats" :sizeChange="sizeChange" :currentChange="currentChange" />
        <p class="total">{{$t('incomeDetail.t4')}}：<spinner v-if="loading.subStatistics"/><cu v-else :val="subStatisticsData.sum | num" :decimals="0" /></p>
      </div>
    </div>
    <newFooter/>
  </div>
</template>
<script>
import newHeader from '@/components/Header';
import newFooter from '@/components/Footer';
import { listDoubleStats, allStatistics, subStatistics } from '@/api';
import { mapGetters } from 'vuex';
import cu from '@/components/CountUp';
import spinner from '@/components/Spinner';
import Pagination from '@/components/Pagination';

export default {
  name: 'index',
  components: {
    newHeader,
    newFooter,
    cu,
    spinner,
    Pagination,
  },
  data() {
    return {
      coin_type: 'hrt',
      type: 1,
      limit: 20,
      page: 1,
      order_by: 'format_day',
      sort: 'desc',
      time: [],
      list: [],
      count: 0,
      allStatisticsData: {
        all_moeny: 0,
        send_moeny: 0,
        yesterday: 0,
      },
      subStatisticsData: {
        sum: 0,
        yesterday: 0,
        address: '',
      },
      loading: {
        listDoubleStats: false,
        allStatistics: false,
        subStatistics: false,
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  computed: {
    ...mapGetters(['subCuid']),
  },
  created() {
    this.listDoubleStats();
    this.allStatistics();
    this.subStatistics();
  },
  methods: {
    changeTime() {
      this.page = 1;
      this.listDoubleStats();
    },
    sizeChange(limit) {
      this.limit = limit;
      this.page = 1;
      this.listDoubleStats();
    },
    currentChange(page) {
      this.page = page;
      this.listDoubleStats();
    },
    listDoubleStats() {
      if (this.loading.listDoubleStats) return;
      this.loading.listDoubleStats = true;
      listDoubleStats({
        puid: this.subCuid,
        coin_type: this.coin_type,
        limit: this.limit,
        page: this.page,
        start_time: this.time[0],
        end_time: this.time[1],
        order_by: this.order_by,
        sort: this.sort,
        type: this.type,
      }).then((res) => {
        this.loading.listDoubleStats = false;
        if (res.data.status === 1) {
          const data = res.data.data;
          this.list = data.data;
          this.count = data.count;
        } else {
          this.list = [];
        }
      }).catch(() => {
        this.loading.listDoubleStats = false;
      });
    },
    subStatistics() {
      this.loading.subStatistics = true;
      subStatistics({ puid: this.subCuid, coin_type: this.coin_type }).then((res) => {
        this.loading.subStatistics = false;
        if (res.data.status === 1) {
          const data = res.data.data;
          [this.subStatisticsData.sum, this.subStatisticsData.yesterday, this.subStatisticsData.address] = [data.sum || 0, data.yesterday || 0, data.address || ''];
        } else {
          this.$message.error(this.$t(`api.${res.data.errcode}`));
        }
      }).catch(() => {
        this.loading.subStatistics = false;
      });
    },
    allStatistics() {
      this.loading.allStatistics = true;
      allStatistics().then((res) => {
        this.loading.allStatistics = false;
        if (res.data.status === 1) {
          const data = res.data.data;
          [this.allStatisticsData.all_moeny, this.allStatisticsData.send_moeny, this.allStatisticsData.yesterday] = [data.all_moeny || 0, data.send_moeny || 0, data.yesterday || 0];
        } else {
          this.$message.error(this.$t(`api.${res.data.errcode}`));
        }
      }).catch(() => {
        this.loading.allStatistics = false;
      });
    },
  },
  watch: {
    type() {
      this.page = 1;
      this.listDoubleStats();
    },
  },
};
</script>
<style lang="scss" scoped>
.income{
  .top{
    margin-top: 40px;
    .num-box{
      padding-top: 38px;
      height: 132px;
      width: 290px;
      background: url(../../assets/images/hrt/income-bg.png) no-repeat;
      .num{
        line-height: 42px;
        height: 42px;
        text-align: center;
        font-size: 0;
        span{
          line-height: 42px;
          vertical-align: baseline;
        }
        .n1{
          font-size: 30px;
          color: #b1f9ff;
        }
        .n2{
          font-size: 20px;
          color: #b2feff;
        }
        .n3{
          font-size: 20px;
          color: #91e9f0;
        }
      }
      .name{
        color: #77e0f3;
        font-size: 16px;
        text-align: center;
      }
    }
    .date-box{
      padding-top: 60px;
      .type-box{
        width: 120px;
        height: 28px;
        background-color: #ffffff;
        border: solid 1px #eaeaea;
        display: flex;
        .btn{
          flex: 1;
          border: none;
          outline: none;
          background-color: #ffffff;
          font-size: 14px;
          color: #919191;
          line-height: 26px;
          &.active{
            background-color: #70c1b3;
            color: #fff;
          }
        }
      }
      /deep/ .el-date-editor{
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 4px;
        border: none;
        background-color: #f9f9f9;
        .el-range-separator{
          padding-top: 3px;
          padding-bottom: 3px;
        }
        .el-range__close-icon{
          display: none;
        }
        .el-input__icon{
          color: #70c1b3;
          margin-right: 15px;
        }
        .el-range-input{
          width: 142px;
          height: 28px;
          background-color: #ffffff;
          border: solid 1px #eaeaea;
          color: #323232;
        }
        .el-range-separator{
          width: 10%;
        }
      }
    }
  }
  .table-box{
    border-radius: 5px;
    overflow: hidden;
    border: solid 1px #eaeaea;
    margin-top: 30px;
    background-color: #fff;
    .table{
      width: 100%;
      border-collapse: collapse;
      tr,td,th{
        border: none;
      }
      td,th{
        text-align: center;
      }
      tr{
        border-bottom: solid 1px #eaeaea;
      }
      thead{
        th{
          color: #323232;
          font-size: 14px;
          padding: 0;
          height: 60px;
          line-height: 60px;
          background-color: #f9f9f9;
          .th-span{
            position: relative;
            .i{
              position: absolute;
              right: -26px;
              top: 50%;
              transform: translateY(-50%);
              display: inline-block;
              width: 16px;
              height: 16px;
              border-radius: 8px;
              background-color: #70c1b3;
              line-height: 16px;
              text-align: center;
              color: #fff;
              font-size: 12px;
            }
          }
        }
      }
      tbody{
        tr{
          td{
            padding: 0;
            line-height: 94px;
            height: 94px;
          }
        }
      }
    }
    .total{
      padding: 60px 100px;
      text-align: right;
      color: #70c1b3;
      font-size: 16px;
    }
  }
}
</style>

